<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">

</head>

<body>
<div class="nav">
    <img src="pic/star.jpg" alt="">
    <span class="blog-title">我的日记系统</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写日记</a>
    <a class="nav-span" href="#" onclick="logout()">注销</a>
</div>

<div class="container">
    <div class="left">
        <div class="card">
            <img src="pic/star.jpg" alt="">
            <h3> </h3>
            <a href="#">Gitee地址 </a>
            <div class="row">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="row">
                <span>2</span>
                <span>1</span>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="title"></div>
            <div class="date"></div>
            <div class="detail" id="detail" style="background-color: transparent"></div>
            <div class="operating">
<!--                <button onclick="window.location.href='blog_update.html'">编辑</button>-->
<!--                <button onclick="deleteBlog()">删除</button>-->
            </div>
        </div>
    </div>
</div>

<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.css" />
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
<script src="js/common.js"></script>
<script>
//从数据库获取，动态填充,获取博客详情
$.ajax({
    type:"get",
    //location.search的作用是带上了list里面的id,查看具体内容
    url:"/blog/getBlogDetail"+location.search,
    success:function (result){
        if(result.code==200&&result.data!=null){
            //这个使用方法需要保存上面的标签，它相当于是粘贴上面的标签
            var blog=result.data;
            //使用上面标签的css
            $(".title").text(blog.title);
            $(".date").text(blog.createTime);
            // $(".detail").text(blog.content);
            editormd.markdownToHTML("detail",{
                markdown: blog.content,
            });
            //判断是否显示编辑/删除按钮
            if(blog.loginUser){
                var finalHtml="";
                finalHtml+=' <button onclick="window.location.href=\'blog_update.html?blogId='+blog.id+'\'">编辑</button>';
                finalHtml+=' <button onclick="deleteBlog('+blog.id+')">删除</button>';
                $(".operating").html(finalHtml);
            }
        }
    },
    error:function (error){
        //用户未登录
        if(error!=null&&error.status==401){
            alert("用户未登录");
            location.href="blog_login.html";
        }
    }

});

//ajax的统一方法，他需要一个header来满足后端这个 String token=request.getHeader("user_token");
//发送ajax时候，就会执行这个函数
//获取用户信息
getUserInfo("/user/getAuthorInfo"+location.search);
//1. 作用理解
//location.search会返回一个字符串，"?" + "查询字符串"  (相当于url中 ?及以后的部分)。
// 例如，如果你访问『https://example.com/?name=John&age=25,location.search将返回?name=John&age=25。
// 数据库存储图片路径,1.将文件上传到硬盘到某个地方，保存文件路径，页面访问时，访问文件的路径。(浏览器安全考虑，不予许直接访问)
        //返回结果result

function  deleteBlog(blogId){
    $.ajax({
        type: "post",
        url:"/blog/delete"+location.search,
        success:function(result){
            if(result.code==200&&result.data==true){
                location.href="blog_list.html";
            }
        }
    })
}

        //显示博客作者信息
        // var userUrl = "/user/getAuthorInfo" + location.search;
        // getUserInfo(userUrl);


</script>
</body>

</html>